<script setup>
import { ref } from 'vue'
import Modal from '@/components/Modal.vue'
import Upload from '@/components/Upload.vue'
import AntIcon from '@/components/AntdIcon/index.vue'
import WangEditor from '@/components/WangEditor.vue'
import { addAssetsApi, updateAssetsApi } from '@/service'

const emit = defineEmits(['addAssets'])
const modalRef = ref()
const formRef = ref()
const formData = ref({
  asset_config_url: '',
  asset_config_title: '',
  asset_config_intro: '',
  asset_config_content: '',
})

const rules = {
  asset_config_url: [{ required: true, message: '请上传图片' }],
  asset_config_title: [{ required: true, message: '请输入标题' }],
  asset_config_intro: [{ required: true, message: '请输入简介' }],
  asset_config_content: [{ required: true, message: '请输入内容' }],
}

const upload = ({ download_url }) => {
  formData.value.asset_config_url = download_url
}

const valChange = (v) => {
  formData.value.asset_config_content = v
}

const submit = () => {
  const { id, asset_config_title, asset_config_url, asset_config_intro, asset_config_content } =
    formData.value

  formRef.value.validate().then(() => {
    if (id) {
      updateAssetsApi({
        asset_config_id: id,
        asset_config_title,
        asset_config_url,
        asset_config_intro,
        asset_config_content,
      }).then(() => {
        emit('addAssets')
        close()
      })
    } else {
      addAssetsApi(formData.value).then(() => {
        emit('addAssets')
        close()
      })
    }
  })
}

const open = (params) => {
  if (params) {
    formData.value = params
  }
  modalRef.value.open()
}

const close = () => {
  formData.value = {
    asset_config_url: '',
    asset_config_title: '',
    asset_config_intro: '',
    asset_config_content: '',
  }
  modalRef.value.close()
}

defineExpose({
  open,
  close,
})
</script>
<template>
  <Modal
    ref="modalRef"
    :title="formData?.id ? '编辑资产配置' : '创建资产配置'"
    width="1100px"
    @cancel="close"
  >
    <a-form ref="formRef" :model="formData" :rules="rules" autocomplete="off">
      <a-form-item label="标题" name="asset_config_title">
        <a-input
          v-model:value="formData.asset_config_title"
          placeholder="请输入标题"
          show-count
          :maxlength="20"
        >
          <template #prefix> <AntdIcon icon="SisternodeOutlined" /> </template>
        </a-input>
      </a-form-item>
      <a-form-item label="图片" name="asset_config_url">
        <div class="flex items-center gap-5">
          <div class="flex flex-col items-center gap-2">
            <a-image
              :width="200"
              :src="formData.asset_config_url"
              v-if="formData.asset_config_url"
            />
            <span class="text-[#999]">图片推荐尺寸: 600*400 (3:2)</span>
          </div>
          <Upload @uploadSuccess="upload">
            <div
              class="size-20 rounded-[6px] flex items-center justify-center border border-[#eee] cursor-pointer"
            >
              <AntIcon :icon="formData?.id ? 'EditOutlined' : 'PlusOutlined'" size="20px" />
            </div>
          </Upload>
        </div>
      </a-form-item>
      <a-form-item label="简介" name="asset_config_intro">
        <textarea
          class="outline-0 border border-[#eee] p-3 rounded-[6px] w-full h-35"
          v-model="formData.asset_config_intro"
          placeholder="请输入简介"
        />
      </a-form-item>
      <a-form-item label="内容" name="asset_config_content">
        <WangEditor :val="formData.asset_config_content" @change="valChange" />
      </a-form-item>
      <div class="flex justify-end gap-5">
        <a-button type="primary" @click="submit">提交</a-button>
        <a-button @click="close">取消</a-button>
      </div>
    </a-form>
  </Modal>
</template>
